<template>
  <div class="PartnerAdmin">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item
              label="合作方名称"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 16, offset: 1}"
            >
              <a-input
                placeholder="请输入"
                v-decorator="[
          'partnerName',
          {rules: [{ required: true, message: '请输入合作方名称!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="联系方式" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'contact',
          {rules: [{ required: true, message: '请输入联系方式!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="绑定状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select
                v-decorator="[
          'bindingState',
          {rules: [{ required: true, message: '请选择绑定状态!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option :value="10">全部</a-select-option>
                <a-select-option v-for="(item,key) in selectInfo" :key="key" :value="key">{{item}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>


        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button
              type="primary"
              @click="findPartnerListByCondition()"
              :style="{ marginRight: '1%' }"
            >查询</a-button>
            <a-button type="dashed" @click="listExport()" :style="{ marginRight: '1%' }">导出</a-button>
            <a-button htmlType="reset">重置</a-button>
            <a-button
              style="background:rgb(0,204,102);color:white;margin-left:2%"
              @click="addModal()"
            >新增</a-button>
          </a-col>
        </a-row>

      </a-form>
    </a-card>

    <a-card style="margin-top:2%">
      <a-table
        style="margin-top:2%"
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.partnerId"
        :bordered="true"
      >
        <template slot="bindingPointNumber" slot-scope="text,record">
          <span
            :class="record.posCount==0?'':'blue'"
            @click="record.posCount==0?'':numberModal(text,record)"
          >{{record.posCount}}</span>
        </template>
        <template slot="operate" slot-scope="text,record">
          <div class="blue" @click="showModal(text,record)">编辑</div>
          <div class="red" @click="record.posCount==0?delConfirm(text,record):delConfirmNO()">删除</div>
        </template>
      </a-table>
    </a-card>
    <a-modal title="新增合作方" :visible="addVisible" @ok="addOk" @cancel="addCancel">
      <template slot="footer">
        <a-button key="back" @click="addCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="addOk">确定</a-button>
      </template>
      <a-form :form="form">
        <a-form-item label="合作方名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            placeholder="请输入"
            v-decorator="[
          'partnerNameAdd',
          {rules: [{ required: true, message: '请输入合作方名称!' }]} 
        ]"
          />
        </a-form-item>
        <a-form-item label="手机号码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input placeholder="请输入" v-model="phoneAdd"/>
        </a-form-item>
        <a-form-item label="地址信息" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            placeholder="请输入"
            v-decorator="[
          'addressInfoAdd',
          {rules: [{ required: true, message: '请输入地址信息!' }]} 
        ]"
          />
        </a-form-item>
        <!-- <a-form-item label="分润比例" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            placeholder="请输入"
            v-decorator="[
          'proportion',
          {rules: [{ required: true, message: '请输入分润比例!' }]} 
        ]"
          />
        </a-form-item>-->
        <a-form-item label="登录账号" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <span>{{phoneAdd}}</span>
        </a-form-item>
        <a-form-item label="初始密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <span>{{initialPwd}}</span>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="编辑合作方详情"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      v-model="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定修改</a-button>
      </template>
      <a-form :form="form">
        <a-form-item label="合作方名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            style="width: 100%"
            placeholder="请输入"
            v-decorator="[
          'partnerNameEidt',
          {rules: [{ required: true, message: '请输入合作方名称!' }]} 
        ]"
          />
        </a-form-item>
        <a-form-item label="手机号码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            style="width: 100%"
            placeholder="请输入"
            v-decorator="[
          'phone',
          {rules: [{ required: true, message: '请输入手机号码!' }]} 
        ]"
          />
        </a-form-item>
        <a-form-item label="地址信息" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            style="width: 100%"
            placeholder="请输入"
            v-decorator="[
          'addressInfo',
          {rules: [{ required: true, message: '请输入地址信息!' }]} 
        ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      title="查看点位"
      :visible="numberVisible"
      @ok="numberOk"
      @cancel="numberCancel"
      :width="700"
    >
      <a-table
        style="margin-top:2%"
        :columns="columnsNumber"
        :dataSource="dataNumber"
        :pagination="false"
        :rowKey="record => record.posId"
        :bordered="true"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <template slot="facilityNumber" slot-scope="text,record">
          <span
            :class="record.posCount==0?'':'blue'"
            @click="record.posCount==0?'':deviceModal(text,record)"
          >{{record.posCount}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      :title="deviceTitle"
      :visible="deviceVisible"
      @ok="deviceOk"
      @cancel="deviceCancel"
      :footer="null"
    >
      <a-table
        style="margin-top:2%"
        :columns="columnsDevice"
        :dataSource="dataDevice"
        :pagination="false"
        :rowKey="record => record.devId"
        :bordered="true"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "合作方名称",
    dataIndex: "partnerName",
    key: "partnerName",
    scopedSlots: { customRender: "partnerName" },
    align: "center"
  },
  {
    title: "联系方式",
    dataIndex: "phoneNum",
    key: "contact",
    scopedSlots: { customRender: "contact" },
    align: "center"
  },
  {
    title: "地址信息",
    dataIndex: "address",
    key: "address",
    scopedSlots: { customRender: "address" },
    align: "center"
  },
  {
    title: "绑定点位数",
    dataIndex: "posCount",
    key: "bindingPointNumber",
    scopedSlots: { customRender: "bindingPointNumber" },
    align: "center"
  },
  {
    title: "绑定状态",
    dataIndex: "bindingStatus",
    key: "bindingState",
    scopedSlots: { customRender: "bindingState" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "creationTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    key: "operate",
    scopedSlots: { customRender: "operate" },
    align: "center"
  }
];

const columnsNumber = [
  {
    title: "序号",
    dataIndex: "number",
    key: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    key: "posName",
    scopedSlots: { customRender: "posName" },
    align: "center"
  },
  {
    title: "点位地址",
    dataIndex: "address",
    key: "address",
    scopedSlots: { customRender: "address" },
    align: "center"
  },
  {
    title: "点位设备数",
    dataIndex: "posCount",
    key: "facilityNumber",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "分润比例",
    dataIndex: "distributionRatio",
    key: "fenRunProportion",
    scopedSlots: { customRender: "fenRunProportion" },
    align: "center"
  }
];

const columnsDevice = [
  {
    title: "序号",
    dataIndex: "number",
    key: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    key: "deviceNumber",
    scopedSlots: { customRender: "deviceNumber" },
    align: "center"
  }
];

const data = [
  {
    key: 1
  }
];

const dataNumber = [
  {
    key: 1
  }
];

const dataDevice = [
  {
    key: 1
  }
];
export default {
  name: "PartnerAdmin",
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [
          { type: "array", required: true, message: "Please select time!" }
        ]
      },
      data: [],
      columns,
      columnsNumber,
      dataNumber: [],
      columnsDevice,
      dataDevice: [],
      deviceVisible: false,
      numberVisible: false,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 5,
        defaultCurrent: 5,
        current: 1,
        total: 500
      },
      visible: false,
      selectdata: [],
      isSelect: false,
      deviceTitle: "",
      selectInfo: [],
      addVisible: false,
      phoneAdd: "",
      initialPwd: "0123456"
    };
  },
  watch: {},
  computed: {},
  methods: {
    select(value, option) {
      // console.log(value,option);
      // this.editValue = value;
    },
    dropdownVisibleChange(open) {
      // console.log(open);
    },
    handleChange(value, option, index) {
      console.log(`selected ${value}`);
    },
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
      });
    },
    callback(key) {
      console.log(key);
    },
    //在点击的编辑时候就调用了编辑信息回显
    showModal(text, record) {
      this.visible = true;
      //编辑得时候有个合作方id--
      this.editId = record.partnerId;
      //这边传递的是一个实参
      this.editShowPartner(this.editId);
    },
    //在点击的编辑时候就调用了编辑信息回显
    handleOk(e) {
      this.visible = false;
      this.editById(this.editId);
    },
    handleCancel(e) {
      console.log("点击取消了");
      this.visible = false;
    },

    addModal(text, record) {
      this.addVisible = true;
    },
    addOk(e) {
      this.addVisible = false;
      this.addOne();
    },
    addCancel(e) {
      console.log("点击取消了");
      this.addVisible = false;
    },

    // 绑定设备数弹框
    numberModal(text, record) {
      this.numberVisible = true;
      this.findPosListByPartnerId(record.partnerId);
    },
    numberOk(e) {
      this.numberVisible = false;
      // var values = this.form.getFieldsValue();
      // this.listEdit(values.classifyName);
      // console.log(this.formatter(values.superiorClassify, this.selectdata));
    },
    numberCancel(e) {
      console.log("点击取消了");
      this.numberVisible = false;
    },

    // 查看模板商品弹框
    deviceModal(text, record) {
      this.deviceVisible = true;
      this.findDevListByPosId(record.posId);
      this.deviceTitle = record.posName + "的设备";
    },
    deviceOk(e) {
      this.deviceVisible = false;
      // var values = this.form.getFieldsValue();
      // this.listEdit(values.classifyName);
      // console.log(this.formatter(values.superiorClassify, this.selectdata));
    },
    deviceCancel(e) {
      console.log("点击取消了");
      this.deviceVisible = false;
    },

    // 删除确认框
    delConfirm(text, record) {
      var that = this;
      this.delId = record.partnerId;
      this.$confirm({
        title: "确认删除合作方",
        content: `您确定要删除这个合作方吗？`,
        okText: "确定",
        cancelText: "取消",
        iconType: "question-circle",
        onOk() {
          that.deleteById(that.delId);
          console.log("点击确定了");
        },
        onCancel() {
          console.log("点击取消了");
        }
      });
    },
    delConfirmNO() {
      this.$message.error("有绑定点位数,暂不能删除");
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.findPartnerListByCondition();
    },

    // 列表初始化
    listInit() {
      this.axios
        .post(this.baseUrl + "/partner/listInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          this.selectInfo = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 查询商品模板列表
    findPartnerListByCondition() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/partner/findPartnerListByCondition", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          bindingStatus: values.bindingState,
          partnerName: values.partnerName,
          phoneNum: values.contact
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 导出点位
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/pos/export",
          {
            loginToken: this.$store.state.loginToken,
            name: values.templateName,
            templateCode: values.goodsNumber
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "模板管理表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 新增合作方
    addOne() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/partner/addOne", {
          loginToken: this.$store.state.loginToken,
          contactPhone: this.phoneAdd,
          name: values.partnerNameAdd,
          address: values.addressInfoAdd,
          pwd: this.initialPwd
          // distributionRatio: values.proportion
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.findPartnerListByCondition();
            this.$message.info("新增成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 合作方下点位列表
    findPosListByPartnerId(partnerId) {
      this.axios
        .post(this.baseUrl + "/partner/findPosListByPartnerId", {
          loginToken: this.$store.state.loginToken,
          partnerId: partnerId
        })
        .then(response => {
          // console.log(response);
          this.dataNumber = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 点位下设备列表
    findDevListByPosId(posId) {
      this.axios
        .post(this.baseUrl + "/partner/findDevListByPosId", {
          loginToken: this.$store.state.loginToken,
          posId: posId
        })
        .then(response => {
          // console.log(response);
          this.dataDevice = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 编辑合作方时的信息回显-形参
    editShowPartner(partnerId) {
      this.axios
        .post(this.baseUrl + "/partner/editShowPartner", {
          loginToken: this.$store.state.loginToken,
          partnerId: partnerId
        })
        .then(response => {
          console.log(response);
          this.editInfo = response.data.data;
          //设置一组输入控件的值
          this.form.setFieldsValue({
            //名称
            partnerNameEidt: this.editInfo.partnerName,
            //手机号
            phone: this.editInfo.phoneNum,
            //地址信息
            addressInfo: this.editInfo.address
          });
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 编辑合作方
    editById(partnerId) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/partner/editById", {
          loginToken: this.$store.state.loginToken,
          contactPhone: values.phone,
          name: values.partnerNameEidt,
          address: values.addressInfo,
          partnerId: partnerId
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.findPartnerListByCondition();
            this.$message.info("编辑成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 删除合作方
    deleteById(partnerId) {
      var param = {
        loginToken: this.$store.state.loginToken,
        partnerId: partnerId
      };
      this.axios
        .delete(this.baseUrl + "/partner/deleteById", { data: param })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.findPartnerListByCondition();
            this.$message.success("删除成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.listInit();
    this.findPartnerListByCondition();
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.PartnerAdmin {
  width: 100%;
}
</style>
